<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/6/15
  Time: 下午12:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>

<html>
<head>
    <title>用户管理</title>

    <link rel="stylesheet" href="/ems/css/upload/webuploader.css">
    <link rel="stylesheet" href="/ems/css/tree/bootstrap-treeview.min.css">
    <script src="/ems/js/jquery.md5.js"></script>
    <script src="/ems/js/tree/bootstrap-treeview.min.js"></script>

    <style type="text/css">

        .ems_add_gbtn {
            flex: auto;
            display: flex;
            justify-content: flex-end;
        }

        .ems_add_heading {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 5px 10px;
        }
        .ems_form_reset {
            margin-left: 10px;
        }

        .ems_form_checkbox_g>label {
            width: 120px;
            margin-right: 10px;
        }

        .ems_form_checkbox_g>label>a {
            display: none;
            text-decoration: none;
        }

        #ems_role_form {
            display: none;
        }

        #add_new_role {
            margin-top: 10px;
            cursor: pointer;
        }
        #add_new_role>a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="ems_form">
    <div class="panel panel-default">
        <div class="panel-heading ems_add_heading">
            <h3 class="panel-title" style="color: inherit;">用户新增</h3>

            <div class="ems_add_gbtn">
                <button type="button" class="btn btn-primary ems_form_submit">
                    <span class="glyphicon glyphicon-check"></span> 保存
                </button>
                <button type="button" class="btn btn-default ems_form_reset">
                    <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                </button>
            </div>
        </div>


        <div class="ems_edit_content">
            <form class="form-horizontal ems_internal_form">
                <div class="form-group">
                    <label class="col-sm-3 control-label">登录账号：</label>
                    <div class="col-sm-6">
                        <input type="text" name="login_account" id="login_account" class="form-control" placeholder="不能为中文，长度不超过32">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">登录密码：</label>
                    <div class="col-sm-6">
                        <input type="password" required name="password" class="form-control" placeholder="不能为中文">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">手机号：</label>
                    <div class="col-sm-6">
                        <input type="number" name="phone" class="form-control" placeholder="手机号">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">姓名：</label>
                    <div class="col-sm-6">
                        <input type="text" name="real_name" class="form-control" placeholder="姓名，长度不超过12">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">角色：</label>
                    <div class="col-sm-6 ems_form_checkbox_g">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="1"> 经纪人
                            <a>编辑</a>
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="2"> 物业
                            <a>编辑</a>
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="3"> 业主
                            <a>编辑</a>
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="4"> 商家
                            <a>编辑</a>
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="5"> 开发人员
                            <a>编辑</a>
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="6"> 运营
                            <a>编辑</a>
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="role_id" value="7"> 测试人员
                            <a>编辑</a>
                        </label>

                        <div id="add_new_role">
                            <a>没有想要的角色？创建新角色</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>


    <div class="ems_form" id="ems_role_form">
        <div class="panel panel-default">
            <div class="panel-heading ems_add_heading">
                <h3 class="panel-title" style="color: inherit;">角色新增</h3>

                <div class="ems_add_gbtn">
                    <button type="button" class="btn btn-primary ems_form_submit">
                        <span class="glyphicon glyphicon-check"></span> 保存
                    </button>
                    <button type="button" class="btn btn-default ems_form_reset">
                        <span class="glyphicon glyphicon-shopping-cart"></span> 重置
                    </button>
                </div>
            </div>
            <div class="ems_edit_content">
                <form class="form-horizontal ems_internal_form">
                <div class="form-group">
                    <label class="col-sm-3 control-label">角色名称：</label>
                    <div class="col-sm-6">
                        <input type="text" required name="role_name" class="form-control" placeholder="必填，长度不超过32">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">权限：</label>
                    <div class="col-sm-6">
                        <div id="btree" class="treeview"></div>
                    </div>
                </div>
            </form>
            </div>
    </div>
</div>
<script>

    $.validator.setDefaults({
        //认证成功
        submitHandler: function(form) {
            var data = {};
            data["login_account"] = $.trim($(form).find("input[name=login_account]").val());
            data["password"] = $.md5($.trim($(form).find("input[name=password]").val()));
            data["phone"] = $.trim($(form).find("input[name=phone]").val());
            data["real_name"] = $.trim($(form).find("input[name=real_name]").val());

            var role_id = "";
            $("input:checkbox[name=role_id]:checked").each(function (index,val) {
                role_id += $(val).val() + ",";
            });
            role_id = role_id.substring(0,role_id.length - 1);
            data["role_id"] = role_id;
            saveAdmin(data);
        }
    });

    function saveAdmin(data) {
        $.emsAjax({
            url:"/ems/admin/save",
            type:"POST",
            data:data,
            success:function (resp) {
                //window.location.href = "/user/index";
                if (resp.status == "000") {
                    $.alert(resp.message)
                }else {
                    $.errorAlert(resp.message);
                }
            }
        })
    }

    function formValidate(form) {
        form.validate({
            rules: {
                login_account: {
                    required:true,
                    remote: {
                        url: "/ems/admin/isAccountExist",
                        type: "POST",
                        data: {login_account:function () {
                            return $("#login_account").val();
                        }},
                    }
                }
            },
            messages: {
                login_account:{
                    required:"账号不能为空",
                    remote:"账号已存在，请重新填写"
                }
            }
        });
    }

    $(function () {

        $("form").each(function (index,val) {
            $(val)[0].reset();
        });

        //表单验证
        formValidate($(".ems_internal_form"));

        $(".ems_form_submit").on("click",function () {
            var form = $(this).parents(".ems_form").find("form:first");
            form.submit();
        });

        $(".ems_form_reset").on("click",function () {
            $(this).parents(".ems_form").find("form:first")[0].reset();
        })

        $(".ems_form_checkbox_g>label").mouseover(function () {
            $(this).children("a").show();
        }).mouseout(function () {
            $(this).children("a").hide()
        });


        function showRoleForm() {
            var roleForm = $("#ems_role_form");
            if (roleForm.is(":hidden")) {
                roleForm.slideDown();
                roleForm.find("form:first").validate();
            }else {
                roleForm.slideUp();
            }
        }

        $("#add_new_role>a").on("click",function (event) {
            event.stopPropagation();
            showRoleForm();
            $("#ems_role_form").find(".panel-title").text("角色新增");
        });

        $(".checkbox-inline>a").on("click",function (event) {
            //event.preventDefault();
            showRoleForm();
            $("#ems_role_form").find(".panel-title").text("角色编辑");
        })
    })
</script>

<script>
    var treeData = "";
    $.emsAjax({
        type:"POST",
        url:"/ems/resource/list",
        success:function (resp) {
            console.log(resp);
            treeData = resp;
            initTree();
        }
    })


    function initTree() {
        $('#btree').treeview({
            data: treeData,
            showIcon: true,
            levels:1,
            color: "#428bca",
            showCheckbox: true,
            onNodeChecked: function(event, node) {
                    console.log(node);
            },
            onNodeUnchecked: function (event, node) {

            }
        });
    }
</script>

<script src="/ems/js/upload/webuploader.min.js"></script>
<script src="/ems/js/ems/ems_upload.js"></script>
</body>
</html>
